﻿
@{
    ViewBag.Title = "单位管理";
}

<div class="row col-md-12 ml-0" style="height: 3vh">
    <strong class="font-rfs">单位管理</strong>
</div>
<div class="row col-md-12 ml-0 pre-scrollable pr-0" style="min-height: 89vh">
    <div class="row col-md-12" style="min-height: 5vh">
        <select id="Unit-Select-Type" class="form-control font-rfs custom-headtoolbar-select"></select>
        <button id="Unit-addUnit" class="btn btn-rfs"><i class="bi-plus-square"></i> 添加</button>
        <button id="Unit-deleteUnit" class="btn btn-rfs" style="margin-left:4px"><i class="bi-trash"></i> 删除</button>
    </div>
    <div class="row col-md-12 pr-0" style="min-height: 84vh">
        <div class="table-responsive-sm shadow p-0 bg-white rounded col-md-12 pre-scrollable" style="min-height: 45vh">
            <table id="Unit-TableUnit" class="table table-striped table-bordered table-sm table-hover overflow-auto">
                <thead>
                    <tr>
                        <th>单位代码</th>
                        <th>中文名</th>
                        <th>英文名</th>
                        <th>单位类型</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div class="row col-md-12 ml-0" style="margin-top: 8px; padding-right:0px;padding-left: 0px;">
            <div class="row col-md-12 tab-content" style="padding-left: 0;padding-right: 0px;right: -15px;height: 3vh">
                <ul class="nav col-md-12" style="padding-right: 0;margin-bottom: -2px;">
                    <li class="tabButton col-md-1 tab-first-active font-rfs" style="text-align: center;"><a href="#Unit-tabFactor" data-toggle="tab">转换因子</a></li>
                    <li class="col-md-11 tab-Notactive" style="text-align: center;"><a href="" data-toggle="tab"></a></li>
                </ul>
            </div>
            <div class="col-md-12 ml-0 mr-0 tab-pane active tab-content tab-body" id="tabAnalyte" style="padding-right: 0px;padding-left: 0px;">
                <button id="addfactor" class="btn btn-rfs"><i class="bi-plus-square"></i> 添加</button>
                <button id="deletefactor" class="btn btn-rfs" style="margin-left:4px"><i class="bi-trash"></i>删除</button>
                <div class="table-responsive-sm p-0 bg-white rounded col-md-12" style="min-height: 30vh">
                    <table id="Unit-TableFactor" class="table table-striped table-bordered table-sm table-hover overflow-auto">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>单位代码</th>
                                <th>转换因子</th>
                                <th>目标代码</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="Unit-Modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p id="modalTitle" class="pt-3 pl-3 font-rfs"></p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
                <label id="ModalID" style="display:none">Unit-Modal</label>
            </div>
            <div class="modal-body">
                <div id="Unit-Modal-Embed"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="DeleteConfirm" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p class="pt-3 pl-3 font-rfs">删除</p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <p class="font-rfs">确认删除当前选中记录吗？</p>
            </div>
            <div class="modal-Delete-footer">
                <button id="modal-deleteUnit" class="btn btn-outline-primary border-radius-noradius noLeftBorder noRightBorder font-rfs" style="width:50%; height:fit-content">删除</button>
                <button id="confirmUnit" data-dismiss="modal" class="btn btn-outline-primary border-radius-noradius noRightBorder font-rfs" style="width:50%; height:fit-content">取消</button>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        var unit_uniqueId = "";
        var factor_uniqueId = "";
        var delete_indicator = 0;  // 1 删除 UNIT / 2 删除 factor

        $(document).ready(function () {
            LoadUnitType('Unit-Select-Type');
        });

        $("#Unit-Select-Type").change(function () {
            LoadUnitList($("#Unit-Select-Type").find("option:selected").text());
        });

        function LoadUnitList(UnitType) {
            var columns = [{ field: "code" }, { field: "chineseName" }, { field: "englishName" }, { field: "type" }, { field: "description" }];

            $('#Unit-TableUnit').bootstrapTable('destroy');
            $('#Unit-TableFactor').bootstrapTable('destroy');
            unit_uniqueId ="";
            factor_uniqueId = "";

            $('#Unit-TableUnit').bootstrapTable({
                method: 'post',
                url: "GetUnitByType",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加

                uniqueId: "code",          // 设置主键
                locale: "zh-CN",
                columns: columns,          // 加载列定义, 注意！这个地方绑定的列名称开头大写字母会全部变成小写。
                silent: true,  //刷新事件必须设置

                queryParams: function (params) {
                    var data = {
                        limit: params.limit,
                        offset: params.offset,

                        Type: UnitType,  // 传递的参数，这的名称要和控制器里对应的参数名称一样
                    };
                    return data;
                }, //参数
                queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求
                dataField: "rows",
                sidePagination: "server", // 服务器端分页，这个参数必需设置
                pagination: true,  // 显示分页条,设为true，启用了分页功能
                pageNumber: 1,
                pageSize: 15,   // 默认页大小
                pageList: [5, 10, 15, 20],  // 控制每页数目

                onClickRow: function (row, $element, field) {
                    $("#Unit-TableUnit").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");

                    unit_uniqueId = row.code;
                    factor_uniqueId = "";  // 刷新列表后，清空该值

                    LoadFactorList(row.code);
                },
                formatLoadingMessage: function () {
                    return "加载中...";
                },
                formatNoMatches: function () {  //没有匹配的结果
                    return '无符合条件的记录';
                },
                onLoadSuccess: function (data) {   // 数据加载成功后触发该事件
                    $('.fixed-table-toolbar').css("height", "0px"); /* 隐藏表格上的工具栏 */
                },
                onLoadError: function (data) {
                    $('#Unit-TableUnit').bootstrapTable('removeAll');
                },
                formatShowingRows: function (pageFrom, pageTo, totalRows) {
                    return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
                },
                formatRecordsPerPage: function (pageNumber) {
                    return " 每页显示" + pageNumber + '条记录';
                }
            });
        }

        function LoadFactorList(UnitCode) {
            var factor_columns = [{ field: "id", visible: false }, { field: "code" }, { field: "factor" }, { field: "targetCode" }];
            factor_uniqueId = "";

            $('#Unit-TableFactor').bootstrapTable('destroy');
            $('#Unit-TableFactor').bootstrapTable({
                method: 'post',
                url: "GetConversionFactorList",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
                uniqueId: "id",          // 设置主键
                locale: "zh-CN",
                columns: factor_columns,          // 加载列定义, 注意！这个地方绑定的列名称开头大写字母会全部变成小写。
                silent: true,  //刷新事件必须设置

                queryParams: function (params) {
                    var data = {
                        SourceCode: UnitCode,  // 传递的参数，这的名称要和控制器里对应的参数名称一样
                    };
                    return data;
                }, //参数
                queryParamsType: "search", //参数格式,发送标准的RESTFul类型的参数请求

                onClickRow: function (row, $element, field) {
                    $("#Unit-TableFactor").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");

                    factor_uniqueId = row.id;
                },
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {  //没有匹配的结果
                    return '无符合条件的记录';
                },
                onLoadSuccess: function (data) {   // 数据加载成功后触发该事件
                    $('.fixed-table-toolbar').css("height", "0px"); /* 隐藏表格上的工具栏 */
                },
                onLoadError: function (data) {
                    $('#Unit-TableFactor').bootstrapTable('removeAll');
                },
            });
        }

        $("#Unit-deleteUnit").click(function () {
            if (unit_uniqueId == "") {
                return false;
            }

            $("#DeleteConfirm").modal({
                backdrop: 'static',
                keyboard: false
            });

            delete_indicator = 1;
        });

        $("#modal-deleteUnit").click(function () {
            if (delete_indicator == 1) {
                $.post("DeleteUnit", {
                    Code: unit_uniqueId
                }, function (data) {
                    if (data == "删除成功！") {
                        $('#Unit-TableUnit').bootstrapTable('removeByUniqueId', unit_uniqueId);  // 删除指定的行
                    } else {
                        alert(data);
                    }
                });
             }

            if (delete_indicator == 2) {
                $.post("DeleteFactor", {
                    Id: factor_uniqueId
                });
                $('#Unit-TableFactor').bootstrapTable('removeByUniqueId', factor_uniqueId);  // 删除指定的行
            }

            $("#DeleteConfirm").modal('hide');
        });

        $("#deletefactor").click(function () {
            if (factor_uniqueId == "") {
                return false;
            }

            $("#DeleteConfirm").modal({
                backdrop: 'static',
                keyboard: false
            });

            delete_indicator = 2;
        });

        $("#Unit-addUnit").click(function () {
            $("#modalTitle").text("添加单位");

            $("#Unit-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $.post("AddUnit", function (datas) {
                $("#Unit-Modal-Embed").html(datas);
            });
        });

        $("#addfactor").click(function () {
            $("#modalTitle").text("添加转换因子");

            $("#Unit-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $.post("AddFactor", function (datas) {
                $("#Unit-Modal-Embed").html(datas);
            });
        });

        $(".tabButton").hover(
            function () {
                $('.tabButton').addClass('tab-first-mouse'); // 鼠标进入时绑定样式
            },
            function () {
                $('.tabButton').removeClass('tab-first-mouse'); // 鼠标进入时绑定样式
            });

    </script>
}
